<template>
	<div class="main-box">
		<div class="table-box">
			<ProTable ref="proTableRef" title="字典列表" 
			:columns="columns" 
			:requestApi="menuApi.getMenuTree"
			:pagination="false">
				<template #tableHeader>
					<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu({})" v-auth="'system:menu:add'">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增菜单
				</el-button>
				</template>
				<template #operation="scope">
					<el-button size="small" text type="primary" @click="onOpenAddMenu(scope.row)" v-auth="'system:menu:add'">新增</el-button>
						<el-button size="small" text type="primary" @click="onOpenEditMenu( scope.row)" v-auth="'system:menu:update'">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)" v-auth="'system:menu:delete'">删除</el-button>
				</template>
			</ProTable>
			<MenuDialog ref="menuDialogRef" @refresh="handleQuery()" :dictData="state.dictData" />
		</div>
	</div>
</template>

<script setup lang="tsx" name="systemMenu">
import { defineAsyncComponent, ref,  reactive, watchEffect } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { feature } from '/@/utils/axios-utils';
import { SysMenu,SysDictData } from '/@/api-services/models/system';
import menuApi from '/@/api-services/apis/system/menuApi';
import dictDataApi from '/@/api-services/apis/system/dictDataApi';
import { ColumnProps } from '/@/components/ProTable/interface';
import ProTable from '/@/components/ProTable/index.vue';
// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/component/editMenu.vue'));

const proTableRef = ref();
// 定义变量内容
const menuDialogRef = ref();
const state = reactive({
	tableData: {
		data: [] as Array<SysMenu> ,
		loading: true,
	},
	dictData:[] as Array<SysDictData>,//字典数据
});


const columns: ColumnProps<SysMenu>[] = [
	{ prop: "meta.title", label: "菜单名称", 
	search: { el: "input",key:"name", props: { placeholder: "菜单名称" } } },
	{ prop: "path", label: "路由路径" },
	{ prop: "component", label: "组件路径" },
	{ prop: "menuType", label: "菜单类型",
		render:scope=>{
			var data=state.dictData.filter(item=>item.value==scope.row.menuType)[0]
			return (<el-tag size={data.tagSize} type={data.tagType}> {data.name}</el-tag>)    
		}
	},
	{ prop: "sortCode", label: "排序" },
	{ prop: "operation", label: "操作", fixed: "right" }
]

// 获取路由数据，真实请从接口获取
const handleQuery = async () => {
	var res= await menuApi.getMenuTree();
	state.tableData.loading = true;
	//state.tableData.data = routesList.value;
	state.tableData.data = res.data.data ?? [];
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};
// 打开新增菜单弹窗
const onOpenAddMenu = (row:any) => {
	menuDialogRef.value.openDialog('add',row);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = ( row: any) => {
	menuDialogRef.value.openDialog('edit',row);
};
// 删除当前行
const onTabelRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将永久删除路由：${row.path}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			const [err]=await feature(menuApi.delete({id:row.id }));
			if(err){
				ElMessage.error(err.message)
			}
			else{
				ElMessage.success('删除成功');
				handleQuery();
			}
		})
		.catch(() => {});
};
const queryMenuType = async ()=>{
	var res = await dictDataApi.getDatalistByType("MenuType")
	state.dictData=res.data.data??[]
}
// 页面加载时
watchEffect(() => {
	queryMenuType();
});
</script>
